<script setup lang="ts">
import type { IProduct } from '@/api/interface/rescue/product/product'
import { ref, watch } from 'vue'
import { getProductDetailApi } from '@/api/modules/rescue/product/product'

interface Props {
  /** 弹窗显示状态 */
  modelValue?: boolean
  /** 物资ID */
  productId?: number
}

defineOptions({
  name: 'ProductDetail',
})

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  productId: undefined,
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  edit: [product: IProduct.Row]
  close: []
}>()

// 响应式数据
const visible = ref(props.modelValue)
const loading = ref(false)
const productDetail = ref<IProduct.Row | null>(null)
const expandedSkus = ref<number[]>([])

// 方法
function close() {
  visible.value = false
  productDetail.value = null
  expandedSkus.value = []
  emit('close')
}

async function loadProductDetail(productId: number) {
  loading.value = true
  expandedSkus.value = []

  try {
    const response = await getProductDetailApi({ id: productId })
    productDetail.value = response.data || null
  } catch (error) {
    console.error('获取物资详情失败:', error)
    uni.showToast({
      title: '获取详情失败',
      icon: 'none',
    })
    close()
  } finally {
    loading.value = false
  }
}

// 监听外部状态变化
watch(
  () => props.modelValue,
  (newVal) => {
    visible.value = newVal
    if (newVal && props.productId) {
      loadProductDetail(props.productId)
    }
  },
  { immediate: true },
)

// 监听内部状态变化
watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
  if (!newVal) {
    productDetail.value = null
    expandedSkus.value = []
  }
})

// 监听产品ID变化
watch(
  () => props.productId,
  (newId) => {
    if (newId && visible.value) {
      loadProductDetail(newId)
    }
  },
)

async function open(productId: number) {
  visible.value = true
  await loadProductDetail(productId)
}

function onEdit() {
  if (productDetail.value) {
    emit('edit', productDetail.value)
  }
}

// 切换批次展开状态
function toggleLotExpand(skuIndex: number) {
  const index = expandedSkus.value.indexOf(skuIndex)
  if (index > -1) {
    expandedSkus.value.splice(index, 1)
  } else {
    expandedSkus.value.push(skuIndex)
  }
}

// 预览图片
function previewImage(url: string) {
  if (!url) return
  uni.previewImage({
    urls: [url],
    current: url,
  })
}

// 复制物资编号
function copyProductNumber(productNumber: string | undefined) {
  if (!productNumber) return

  uni.setClipboardData({
    data: productNumber,
    success: () => {
      uni.showToast({
        title: '编号已复制',
        icon: 'success',
        duration: 1500,
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
        duration: 1500,
      })
    },
  })
}

// 获取标签样式
function getTagStyle(tag: IProduct.TagInfo) {
  if (!tag.backgroundColor && !tag.textColor) {
    return {
      backgroundColor: '#F2F2F7',
      color: '#8E8E93',
    }
  }

  if (tag.plain === 'true') {
    return {
      color: tag.backgroundColor || '#007AFF',
      borderColor: tag.backgroundColor || '#007AFF',
      backgroundColor: 'transparent',
      border: '1px solid',
    }
  } else {
    return {
      color: tag.textColor || '#FFFFFF',
      backgroundColor: tag.backgroundColor || '#007AFF',
    }
  }
}

// 格式化价格
function formatPrice(price: number | string | undefined) {
  if (price === undefined || price === null) return '0.00'
  return Number(price).toFixed(2)
}

// 格式化日期
function formatDate(date: string | undefined) {
  if (!date) return '无'
  try {
    return new Date(date).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    })
  } catch {
    return date
  }
}

// 获取过期时间样式类
function getExpirationClass(expirationTime: string | undefined) {
  if (!expirationTime) return ''

  const now = new Date()
  const expiration = new Date(expirationTime)
  const diffDays = Math.ceil((expiration.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))

  if (diffDays < 0) return 'expired'
  if (diffDays <= 30) return 'expiring-soon'
  return ''
}

// 获取报废日期样式类
function getDiscardClass(discardDate: string | undefined) {
  if (!discardDate) return ''

  const now = new Date()
  const discard = new Date(discardDate)
  const diffDays = Math.ceil((discard.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))

  if (diffDays < 0) return 'discarded'
  if (diffDays <= 7) return 'discard-soon'
  return ''
}

// 获取检修时间样式类
function getOverhaulClass(overhaulDate: string | undefined) {
  if (!overhaulDate) return ''

  const now = new Date()
  const overhaul = new Date(overhaulDate)
  const diffDays = Math.ceil((overhaul.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))

  if (diffDays < 0) return 'overdue'
  if (diffDays <= 7) return 'due-soon'
  return ''
}

// 暴露方法
defineExpose({
  open,
  close,
})
</script>

<template>
  <wd-popup
    v-model="visible"
    position="bottom"
    :close-on-click-modal="false"
    :safe-area-inset-bottom="true"
    :lock-scroll="true"
    class="product-detail-popup"
  >
    <view class="detail-container">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-overlay">
        <view class="loading-content">
          <wd-loading size="24" color="#007AFF" />
          <text class="loading-text">加载中...</text>
        </view>
      </view>
      <!-- 头部 -->
      <view class="detail-header">
        <view class="header-content">
          <text class="header-title">物资详情</text>
          <wd-icon name="close" size="20" class="close-btn" @click="close" />
        </view>
      </view>

      <!-- 详情内容 -->
      <scroll-view v-if="productDetail" class="detail-content" scroll-y :show-scrollbar="false">
        <!-- 基本信息 -->
        <view class="info-section">
          <view class="section-header">
            <wd-icon name="info" size="16" color="#007AFF" />
            <text class="section-title">基本信息</text>
          </view>

          <!-- 物资基本信息卡片 -->
          <view class="product-card">
            <!-- 头部：图片、名称、状态 -->
            <view class="card-header">
              <view class="product-image-wrapper">
                <image
                  v-if="productDetail.image"
                  :src="productDetail.image"
                  class="product-image"
                  mode="aspectFill"
                  @click="previewImage(productDetail.image)"
                />
                <view v-else class="no-image">
                  <wd-icon name="image" size="24" color="#C7C7CC" />
                  <text class="no-image-text">无图片</text>
                </view>
              </view>

              <view class="header-content">
                <text class="product-name">
                  {{ productDetail.name || '未命名物资' }}
                </text>
                <view
                  v-if="productDetail.productNumber"
                  class="product-number-wrapper"
                  @click="copyProductNumber(productDetail.productNumber)"
                >
                  <text class="product-number">
                    {{ productDetail.productNumber }}
                  </text>
                  <wd-icon name="copy" size="12" color="#007AFF" class="copy-icon" />
                </view>
                <text v-else class="no-number">无编号</text>
                <view class="status-tag" :class="{ 'status-tag--disabled': !productDetail.enable }">
                  <text class="status-text">
                    {{ productDetail.enable ? '已启用' : '已禁用' }}
                  </text>
                </view>
              </view>
            </view>

            <!-- 基本信息网格 -->
            <view class="info-grid">
              <view class="info-item">
                <text class="info-label">分类</text>
                <text class="info-value">
                  {{ productDetail.categoryName || '无' }}
                </text>
              </view>

              <view class="info-item">
                <text class="info-label">仓库</text>
                <text class="info-value">
                  {{ productDetail.warehouseName || '无' }}
                </text>
              </view>
            </view>

            <!-- 标签 -->
            <view v-if="productDetail.tags && productDetail.tags.length > 0" class="tags-section">
              <text class="tags-label">标签</text>
              <view class="tags-list">
                <view
                  v-for="tag in productDetail.tags"
                  :key="tag.id"
                  class="tag-item"
                  :style="getTagStyle(tag)"
                >
                  <text class="tag-text">
                    {{ tag.name }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 规格信息 -->
        <view
          v-if="productDetail.productSkus && productDetail.productSkus.length > 0"
          class="info-section"
        >
          <view class="section-header">
            <wd-icon name="grid" size="16" color="#34C759" />
            <text class="section-title">规格信息 ({{ productDetail.productSkus.length }})</text>
          </view>

          <view class="sku-cards">
            <view
              v-for="(sku, skuIndex) in productDetail.productSkus"
              :key="sku.id"
              class="sku-card"
            >
              <!-- 规格基本信息 -->
              <view class="sku-header">
                <view class="sku-image-wrapper">
                  <image
                    v-if="sku.image"
                    :src="sku.image"
                    class="sku-image"
                    mode="aspectFill"
                    @click="previewImage(sku.image)"
                  />
                  <view v-else class="sku-no-image">
                    <wd-icon name="image" size="20" color="#C7C7CC" />
                  </view>
                </view>

                <view class="sku-info">
                  <text class="sku-name">
                    {{ sku.name || `规格 ${skuIndex + 1}` }}
                  </text>
                  <view class="sku-meta">
                    <view class="meta-item">
                      <text class="meta-label">价格:</text>
                      <text class="meta-value price-value">¥{{ formatPrice(sku.price) }}</text>
                    </view>
                    <view class="meta-item">
                      <text class="meta-label">状态:</text>
                      <view class="status-wrapper">
                        <view class="status-dot" :class="{ 'status-dot--disabled': !sku.enable }" />
                        <text class="meta-value">
                          {{ sku.enable ? '启用' : '禁用' }}
                        </text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>

              <!-- 批次信息 -->
              <view v-if="sku.productLots && sku.productLots.length > 0" class="lots-section">
                <view class="lots-header" @click="toggleLotExpand(skuIndex)">
                  <text class="lots-title">批次信息 ({{ sku.productLots.length }})</text>
                  <wd-icon
                    :name="expandedSkus.includes(skuIndex) ? 'arrow-up' : 'arrow-down'"
                    size="14"
                    color="#8E8E93"
                  />
                </view>

                <view v-show="expandedSkus.includes(skuIndex)" class="lots-content">
                  <view v-for="(lot, lotIndex) in sku.productLots" :key="lot.id" class="lot-item">
                    <view class="lot-header">
                      <text class="lot-title">
                        {{ lot.title || `批次 ${lotIndex + 1}` }}
                      </text>
                      <text v-if="lot.lotNumber" class="lot-number">
                        {{ lot.lotNumber }}
                      </text>
                    </view>

                    <view class="lot-details">
                      <view class="detail-grid">
                        <view class="detail-item">
                          <text class="detail-label">价格</text>
                          <text class="detail-value">¥{{ formatPrice(lot.price) }}</text>
                        </view>
                        <view class="detail-item">
                          <text class="detail-label">入库数量</text>
                          <text class="detail-value">
                            {{ lot.quantity || 0 }}
                          </text>
                        </view>
                        <view class="detail-item">
                          <text class="detail-label">检修间隔</text>
                          <text class="detail-value">{{ lot.overhaulGap || 0 }}天</text>
                        </view>
                      </view>

                      <view class="date-grid">
                        <view class="date-item">
                          <text class="date-label">生产日期</text>
                          <text class="date-value">
                            {{ formatDate(lot.productDate) }}
                          </text>
                        </view>
                        <view class="date-item">
                          <text class="date-label">入库时间</text>
                          <text class="date-value">
                            {{ formatDate(lot.storageDate) }}
                          </text>
                        </view>
                        <view class="date-item">
                          <text class="date-label">过期时间</text>
                          <text class="date-value" :class="getExpirationClass(lot.expirationTime)">
                            {{ formatDate(lot.expirationTime) }}
                          </text>
                        </view>
                        <view class="date-item">
                          <text class="date-label">报废日期</text>
                          <text class="date-value" :class="getDiscardClass(lot.discardDate)">
                            {{ formatDate(lot.discardDate) }}
                          </text>
                        </view>
                        <view class="date-item">
                          <text class="date-label">上次检修</text>
                          <text class="date-value">
                            {{ formatDate(lot.overhaulLastDate) }}
                          </text>
                        </view>
                        <view class="date-item">
                          <text class="date-label">下次检修</text>
                          <text class="date-value" :class="getOverhaulClass(lot.overhaulNextDate)">
                            {{ formatDate(lot.overhaulNextDate) }}
                          </text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>

              <view v-else class="no-lots">
                <text class="no-lots-text">暂无批次信息</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 时间信息 -->
        <view class="info-section">
          <view class="section-header">
            <wd-icon name="time" size="16" color="#FF9500" />
            <text class="section-title">时间信息</text>
          </view>

          <view class="time-info">
            <view class="time-item">
              <text class="time-label">创建时间</text>
              <text class="time-value">
                {{ formatDate(productDetail.createTime) }}
              </text>
            </view>
            <view class="time-item">
              <text class="time-label">更新时间</text>
              <text class="time-value">
                {{ formatDate(productDetail.updateTime) }}
              </text>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 底部操作按钮 -->
      <view class="detail-footer">
        <wd-button type="text" class="footer-btn cancel-btn" @click="close">关闭</wd-button>
        <wd-button type="primary" class="footer-btn edit-btn" @click="onEdit">编辑</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
// Apple 设计系统变量
$system-blue: #007aff;
$system-green: #34c759;
$system-orange: #ff9500;
$system-red: #ff3b30;
$system-gray: #8e8e93;
$label-primary: #000000;
$label-secondary: rgba(60, 60, 67, 0.6);
$background-primary: #ffffff;
$background-secondary: #f2f2f7;
$separator: rgba(60, 60, 67, 0.36);

.product-detail-popup {
  // 确保弹窗占满屏幕
  :deep(.wd-popup) {
    z-index: 9999;
  }

  // 全局移动端优化
  .detail-container {
    box-sizing: border-box;
  }

  // 防止任何元素超出容器宽度
  :deep(.detail-container) {
    max-width: 100%;
  }

  .detail-container {
    background-color: $background-primary;
    border-radius: 16px 16px 0 0;
    height: 85vh; // 固定高度，确保不溢出
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: 100vw; // 确保不超过视口宽度
    overflow: hidden; // 防止内容溢出
    box-sizing: border-box;

    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      border-radius: 16px 16px 0 0;

      .loading-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        .loading-text {
          font-size: 14px;
          color: $system-gray;
          font-weight: 500;
        }
      }
    }

    .detail-header {
      padding: 16px 20px;
      border-bottom: 1px solid $separator;
      background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.03) 100%);
      flex-shrink: 0; // 防止头部被压缩

      .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-title {
          font-size: 18px;
          font-weight: 600;
          color: $label-primary;
        }

        .close-btn {
          padding: 6px;
          color: $system-gray;
          transition: all 0.2s ease;
          border-radius: 8px;

          &:active {
            color: $label-primary;
            background-color: rgba(0, 0, 0, 0.05);
          }
        }
      }
    }

    .detail-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      overflow-x: hidden; // 防止水平滚动
      -webkit-overflow-scrolling: touch; // iOS 平滑滚动
      width: 100%;
      box-sizing: border-box;

      .info-section {
        margin-bottom: 20px;

        .section-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 12px;
          padding: 8px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);

          .section-title {
            font-size: 16px;
            font-weight: 600;
            color: $label-primary;
          }
        }

        .product-card {
          background: $background-secondary;
          border-radius: 12px;
          padding: 16px;
          margin-bottom: 16px;

          .card-header {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 16px;

            .product-image-wrapper {
              width: 80px;
              height: 80px;
              flex-shrink: 0;
              border-radius: 8px;
              overflow: hidden;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

              .product-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .no-image {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: rgba(199, 199, 204, 0.2);
                border: 1px dashed rgba(199, 199, 204, 0.5);

                .no-image-text {
                  margin-top: 4px;
                  font-size: 12px;
                  color: $system-gray;
                }
              }
            }

            .header-content {
              flex: 1;
              min-width: 0;
              position: relative;

              .product-name {
                font-size: 18px;
                font-weight: 600;
                color: $label-primary;
                line-height: 1.3;
                margin-bottom: 8px;
                padding-right: 70px; // 为状态标签留出空间
              }

              .product-number-wrapper {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-bottom: 8px;
                padding: 6px 10px;
                background: linear-gradient(
                  135deg,
                  rgba(0, 122, 255, 0.08) 0%,
                  rgba(0, 122, 255, 0.04) 100%
                );
                border: 1px solid rgba(0, 122, 255, 0.15);
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s ease;
                max-width: fit-content;

                &:active {
                  transform: scale(0.98);
                  background: linear-gradient(
                    135deg,
                    rgba(0, 122, 255, 0.12) 0%,
                    rgba(0, 122, 255, 0.08) 100%
                  );
                  border-color: rgba(0, 122, 255, 0.25);
                }

                .product-number {
                  font-size: 13px;
                  font-weight: 500;
                  color: $system-blue;
                  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
                  letter-spacing: 0.5px;
                }

                .copy-icon {
                  opacity: 0.7;
                  transition: opacity 0.2s ease;
                }

                &:hover .copy-icon {
                  opacity: 1;
                }
              }

              .no-number {
                font-size: 13px;
                color: $system-gray;
                font-style: italic;
                margin-bottom: 8px;
              }

              .status-tag {
                position: absolute;
                top: 0;
                right: 0;
                padding: 4px 8px;
                border-radius: 12px;
                background-color: $system-green;
                box-shadow: 0 2px 4px rgba(52, 199, 89, 0.2);

                &--disabled {
                  background-color: $system-gray;
                  box-shadow: 0 2px 4px rgba(142, 142, 147, 0.2);
                }

                .status-text {
                  font-size: 11px;
                  font-weight: 600;
                  color: white;
                  line-height: 1.2;
                }
              }
            }
          }

          .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 16px;

            .info-item {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .info-label {
                font-size: 12px;
                color: $label-secondary;
                font-weight: 500;
              }

              .info-value {
                font-size: 14px;
                color: $label-primary;
                font-weight: 500;
                line-height: 1.2;
              }
            }
          }

          .tags-section {
            .tags-label {
              display: block;
              font-size: 12px;
              color: $label-secondary;
              font-weight: 500;
              margin-bottom: 8px;
            }

            .tags-list {
              display: flex;
              flex-wrap: wrap;
              gap: 6px;

              .tag-item {
                padding: 4px 8px;
                border-radius: 8px;
                background-color: white;
                border: 1px solid rgba(0, 0, 0, 0.05);

                .tag-text {
                  font-size: 11px;
                  font-weight: 500;
                }
              }
            }
          }
        }
      }

      .sku-cards {
        .sku-card {
          background-color: $background-secondary;
          border-radius: 12px;
          padding: 12px;
          margin-bottom: 12px;
          border: 1px solid rgba(0, 0, 0, 0.05);

          &:last-child {
            margin-bottom: 0;
          }

          .sku-header {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
            align-items: flex-start;

            @media (max-width: 375px) {
              display: block;
            }

            .sku-image-wrapper {
              width: 60px;
              height: 60px;
              border-radius: 8px;
              overflow: hidden;
              flex-shrink: 0;

              @media (max-width: 375px) {
                width: 100%;
                height: 80px;
                margin-bottom: 8px;
              }

              .sku-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .sku-no-image {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgba(199, 199, 204, 0.2);
                border: 1px dashed rgba(199, 199, 204, 0.5);
              }
            }

            .sku-info {
              flex: 1;
              min-width: 0;

              .sku-name {
                display: block;
                font-size: 15px;
                font-weight: 600;
                color: $label-primary;
                margin-bottom: 8px;
              }

              .sku-meta {
                display: flex;
                flex-direction: column;
                gap: 4px;

                .meta-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .meta-label {
                    font-size: 13px;
                    color: $label-secondary;
                    min-width: 40px;
                    font-weight: 500;
                  }

                  .meta-value {
                    font-size: 13px;
                    font-weight: 500;
                    text-align: right;

                    &.price-value {
                      color: $system-orange;
                    }
                  }

                  .status-wrapper {
                    display: flex;
                    align-items: center;
                    gap: 4px;

                    .status-dot {
                      width: 6px;
                      height: 6px;
                      border-radius: 50%;
                      background-color: $system-green;

                      &--disabled {
                        background-color: $system-gray;
                      }
                    }
                  }
                }
              }
            }
          }

          .lots-section {
            .lots-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 0;
              border-bottom: 1px solid rgba(0, 0, 0, 0.06);
              cursor: pointer;

              .lots-title {
                font-size: 14px;
                font-weight: 600;
                color: $label-primary;
              }
            }

            .lots-content {
              margin-top: 8px;

              .lot-item {
                background-color: $background-primary;
                border-radius: 8px;
                padding: 8px;
                margin-bottom: 6px;

                &:last-child {
                  margin-bottom: 0;
                }

                .lot-header {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 8px;

                  .lot-title {
                    font-size: 13px;
                    font-weight: 600;
                    color: $label-primary;
                  }

                  .lot-number {
                    font-size: 11px;
                    color: $system-gray;
                    background-color: rgba(142, 142, 147, 0.1);
                    padding: 2px 6px;
                    border-radius: 6px;
                  }
                }

                .lot-details {
                  .detail-grid {
                    display: grid;
                    grid-template-columns: 1fr; // 移动端单列布局
                    gap: 6px;
                    margin-bottom: 8px;

                    @media (min-width: 768px) {
                      grid-template-columns: 1fr 1fr;
                      gap: 8px;
                    }

                    .detail-item {
                      display: flex;
                      justify-content: space-between; // 移动端使用水平对齐
                      align-items: center;
                      padding: 4px 0;
                      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

                      @media (min-width: 768px) {
                        display: flex;
                        flex-direction: column;
                        gap: 2px;
                        padding: 0;
                        border-bottom: none;
                      }

                      .detail-label {
                        font-size: 11px;
                        color: $label-secondary;
                        font-weight: 500;
                        min-width: 60px;
                      }

                      .detail-value {
                        font-size: 12px;
                        font-weight: 500;
                        color: $label-primary;
                        text-align: right;

                        @media (min-width: 768px) {
                          text-align: left;
                        }
                      }
                    }
                  }

                  .date-grid {
                    display: grid;
                    grid-template-columns: 1fr; // 移动端单列布局
                    gap: 4px;

                    @media (min-width: 768px) {
                      grid-template-columns: 1fr 1fr;
                      gap: 6px;
                    }

                    .date-item {
                      display: flex;
                      justify-content: space-between; // 移动端使用水平对齐
                      align-items: center;
                      padding: 4px 0;
                      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

                      @media (min-width: 768px) {
                        display: flex;
                        flex-direction: column;
                        gap: 2px;
                        padding: 0;
                        border-bottom: none;
                      }

                      .date-label {
                        font-size: 11px;
                        color: $label-secondary;
                        font-weight: 500;
                        min-width: 60px;
                      }

                      .date-value {
                        font-size: 11px;
                        font-weight: 500;
                        color: $label-primary;
                        text-align: right;

                        @media (min-width: 768px) {
                          text-align: left;
                        }

                        &.expired,
                        &.discarded,
                        &.overdue {
                          color: $system-red;
                        }

                        &.expiring-soon,
                        &.discard-soon,
                        &.due-soon {
                          color: $system-orange;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .no-lots {
            text-align: center;
            padding: 16px;

            .no-lots-text {
              font-size: 13px;
              color: $system-gray;
            }
          }
        }
      }

      .time-info {
        .time-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);

          &:last-child {
            border-bottom: none;
          }

          .time-label {
            font-size: 15px;
            color: $label-secondary;
            font-weight: 500;
          }

          .time-value {
            font-size: 15px;
            color: $label-primary;
            font-weight: 500;
          }
        }
      }
    }
  }

  .detail-footer {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid $separator;
    background-color: $background-primary;
    flex-shrink: 0; // 防止底部被压缩

    .footer-btn {
      flex: 1;
      padding: 14px 0;
      border-radius: 12px;
      font-weight: 600;
      font-size: 16px;
      transition: all 0.2s ease;

      &.cancel-btn {
        background-color: $background-secondary;
        color: $label-primary;

        &:active {
          background-color: darken($background-secondary, 5%);
          transform: scale(0.98);
        }
      }

      &.edit-btn {
        background-color: $system-blue;
        color: white;

        &:active {
          background-color: darken($system-blue, 10%);
          transform: scale(0.98);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 375px) {
  .detail-container {
    height: 90vh; // 小屏幕增加高度

    .detail-content {
      padding: 12px;

      .info-section {
        margin-bottom: 16px;

        .product-card {
          padding: 12px;

          .card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;

            .product-image-wrapper {
              width: 100%;
              height: 120px;
            }

            .header-content {
              width: 100%;

              .product-name {
                font-size: 16px;
                padding-right: 0;
                margin-bottom: 12px;
              }

              .product-number-wrapper {
                margin-bottom: 10px;
                padding: 5px 8px;

                .product-number {
                  font-size: 12px;
                }

                .copy-icon {
                  width: 10px;
                  height: 10px;
                }
              }

              .no-number {
                font-size: 12px;
                margin-bottom: 10px;
              }

              .status-tag {
                position: static;
                align-self: flex-start;
                display: inline-block;
                padding: 3px 6px;

                .status-text {
                  font-size: 10px;
                }
              }
            }
          }

          .info-grid {
            grid-template-columns: 1fr;
            gap: 10px;
            margin-bottom: 12px;

            .info-item {
              .info-label {
                font-size: 11px;
              }

              .info-value {
                font-size: 13px;
              }
            }
          }
        }

        .sku-cards .sku-card {
          padding: 8px;
        }
      }

      .detail-grid,
      .date-grid {
        grid-template-columns: 1fr !important; // 强制单列布局
        gap: 4px !important;
      }
    }

    .detail-footer {
      padding: 10px 12px;

      .footer-btn {
        padding: 12px 0;
        font-size: 15px;
      }
    }
  }
}

// 极小屏幕优化（如iPhone SE）
@media (max-width: 320px) {
  .detail-container {
    .detail-content {
      padding: 8px;

      .info-section {
        margin-bottom: 12px;

        .product-card {
          padding: 8px;

          .card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;

            .product-image-wrapper {
              width: 100%;
              height: 100px;
            }

            .header-content {
              width: 100%;

              .product-name {
                font-size: 14px;
                padding-right: 0;
                margin-bottom: 10px;
              }

              .product-number-wrapper {
                margin-bottom: 8px;
                padding: 4px 6px;

                .product-number {
                  font-size: 11px;
                }

                .copy-icon {
                  width: 9px;
                  height: 9px;
                }
              }

              .no-number {
                font-size: 11px;
                margin-bottom: 8px;
              }

              .status-tag {
                position: static;
                align-self: flex-start;
                display: inline-block;
                padding: 2px 4px;
                border-radius: 8px;

                .status-text {
                  font-size: 9px;
                }
              }
            }
          }

          .info-grid {
            grid-template-columns: 1fr;
            gap: 8px;
            margin-bottom: 10px;

            .info-item {
              .info-label {
                font-size: 10px;
              }

              .info-value {
                font-size: 12px;
              }
            }
          }
        }

        .sku-cards .sku-card {
          padding: 6px;

          .lots-section .lots-content .lot-item {
            padding: 6px;

            .lot-details {
              .detail-item,
              .date-item {
                padding: 3px 0;

                .detail-label,
                .date-label {
                  font-size: 10px;
                  min-width: 50px;
                }

                .detail-value,
                .date-value {
                  font-size: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 大屏幕优化
@media (min-width: 768px) {
  .detail-container {
    height: 80vh;

    .detail-content {
      padding: 24px;

      .info-section {
        .product-main {
          .product-image-wrapper {
            width: 140px;
            height: 140px;
          }
        }
      }
    }
  }
}
</style>
